<!-- 卡片管理 -->
<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="baseForm" :rules="formRules" label-align="left" :modelValue="formData">
				<uni-forms-item label="定位卡卡号" required name="code" labelWidth="auto" label-align="right">
					<uni-easyinput v-model="formData.code" placeholder="请输入定位卡卡号" />
				</uni-forms-item>
				<uni-forms-item label="卡备注名称" name="name" labelWidth="auto" label-align="right">
					<uni-easyinput v-model="formData.name" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<CardScan ref="cardScan1" :item="cardDetail"></CardScan>
		<view class="btn-box">
			<button class="btn1" type="warn" size="mini" @click="doSubmit('baseForm')"> 确定 </button>
			<button class="btn2 ml10" type="warn" size="mini" plain="true" @click="doCancel()"> 取消 </button>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="5000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
		ProjectStates,
		ProjectKeys,
		PlateColor,
		CarSetting,
		UserJobsType
	} from '@/static/config.js';
	import {
		GetCardColor,
	} from '@/common/util.js';
	import request from '@/common/request.js';
	import CardScan from "@/pages/card/components/card-item/card-scan.vue"
	export default {
		components: {
			CardScan,
		},
		computed: {
			wxUserInfo() {
				return this.$storage.get(Storage_Key.user_info, true);
			},
			webUserInfo() {
				return this.$storage.get(Storage_Key.web_user_info, true);
			},
		},
		data() {
			return {
				disabled: false,
				cardDetail: {},
				// 提示信息弹窗
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				//表单信息
				formData: {
					id: "",
					code: "", //编号
					name: "", //名称，可不用填写
					creatorid: "",
					creator: "",
					createtime: 0,
					updaterid: "",
					updater: "",
					updatetime: 0
				},
				// 校验规则
				formRules: {
					code: {
						rules: [{
							required: true,
							errorMessage: '车牌号不能为空'
						}]
					}
				}
			}
		},
		onLoad(options) {
			this.setListening(); // 设置监听
		},
		methods: {
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('card-code-refresh', function(data) {
					if (data.key) {
						_self.formData.code = data.msg;
					} else {

					}
				})
			},
			doSubmit(ref) {
				let _self = this;
				_self.$refs[ref].validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: false
					});
					_self.formData.creatorid = _self.webUserInfo.userId;
					_self.formData.creator = _self.webUserInfo.userName;
					_self.formData.updaterid = _self.webUserInfo.userId;
					_self.formData.updater = _self.webUserInfo.userName;

					request({
						url: Platform.api_requestUrl + '/stp-card/SaveOrUpdate',
						data: _self.formData,
						method: 'POST',
					}).then(response => {
						uni.hideLoading();
						if (response.code == 200) {
							// 返回的信息
							let res = response.data;
							uni.redirectTo({
								url: '/pages/card/card'
							})
						} else {
							_self.messageToggle('error', response.message || '提交失败');
						}
					}).catch(error => {
						uni.hideLoading();
						uni.showModal({
							content: '保存失败',
							showCancel: false
						})
					});
				}).catch(err => {
					console.log('err', err);
				})
			},
			doCancel() {
				uni.navigateBack();
			},
			messageToggle(type, msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 0 15px 15px 15px;
		background-color: #fff;
	}

	/deep/ .example .uni-forms-item__content {
		overflow: auto;
	}

	/deep/ .example .uni-section-header {
		padding: 5px 10px;
	}

	/deep/ .example .uni-input-input {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-easyinput__content {
		border-color: #fff !important;
	}

	/deep/ .example .uni-easyinput__content-input {
		text-align: right;
	}

	/deep/ .example .uni-forms-item__inner {
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
		padding-top: 15px;
		width: 100%;
		overflow: hidden;
	}

	/deep/ .example .uni-input {
		text-align: right;
		padding: 0;
	}

	/deep/ .example .uni-date-x {
		padding: 0;
	}

	/deep/ .example .uni-date__x-input {
		padding: 0;
		text-align: right;
	}

	/deep/ .example .uni-date-x--border {
		border: 0;
	}

	.btn-box {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 15px 10px;

		.btn1 {
			width: 90%;
			-webkit-flex: 1;
			background-color: $app-platform-color;
		}

		.btn2 {
			width: 90%;
			-webkit-flex: 1;
			color: $app-platform-color !important;
			border: 1px solid $app-platform-color !important;
		}
	}

	.platecode {
		font-size: 14px;
		margin-top: 7px;
		float: right;
		text-align: right;
	}

	.col-gap {
		width: 100vw;
		height: 12px;
		margin-left: -15px;
		margin-top: -1px;
		background-color: #e9e9e9;
	}

	/* 图片 */
	.add-box {
		padding: 15rpx 0;
		flex-wrap: wrap;
	}

	.add-img-box {
		display: flex;
		width: 100%;
		padding: 0 40rpx;
		padding-left: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.add-img-item {
		/* width:210rpx;
		height:210rpx; */
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		position: relative;
		/* padding: 9rpx 0; */
		margin: 5rpx 10rpx;
	}

	.add-img-camera {
		flex: 1;
	}

	.add-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 8rpx;
		top: 17rpx;
		border-radius: 20rpx;
	}
</style>